<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/css.html'}} 
</head>

<body>
     {{include './common/header.html'}}

    <!-- 页面标题 -->
    <section class="bg-blue-400 text-white py-10 mt-16">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold">新闻动态</h1>
            <p class="mt-4 text-xl">了解公司最新动态和行业资讯</p>
        </div>
    </section>

    <!-- 主要内容区 -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="flex flex-col lg:flex-row gap-8">
                <!-- 左侧主要内容 -->
                <div class="lg:w-3/4">
                    <!-- 面包屑导航 -->
            <div class="mb-8">
                <nav class="flex" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="index.html" class="text-gray-700 hover:text-blue-600">
                                <i class="fas fa-home mr-2"></i>首页
                            </a>
                        </li>
                        {{each position}}
                        <li>
                            <div class="flex items-center">
                                <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                                <a href="{{$value.path}}/index.html" class="text-gray-700 hover:text-blue-600">{{$value.name}}</a>
                            </div>
                        </li>
                        {{/each}}
                      
                    </ol>
                </nav>
            </div>
                    <!-- 分类筛选器 -->
                    <!-- <div class="mb-8">
                        <div class="flex flex-wrap gap-4">
                            <a href="news.html?category=all"
                                class="category-button px-6 py-2 rounded-full border border-gray-300 hover:border-primary-600 transition-colors"
                                data-category="all">
                                全部文章
                            </a>
                            <a href="news.html?category=company"
                                class="category-button px-6 py-2 rounded-full border border-gray-300 hover:border-primary-600 transition-colors"
                                data-category="company">
                                公司新闻
                            </a>
                            <a href="news.html?category=industry"
                                class="category-button px-6 py-2 rounded-full border border-gray-300 hover:border-primary-600 transition-colors"
                                data-category="industry">
                                行业资讯
                            </a>
                            <a href="news.html?category=trade"
                                class="category-button px-6 py-2 rounded-full border border-gray-300 hover:border-primary-600 transition-colors"
                                data-category="trade">
                                外贸知识
                            </a>
                        </div>
                    </div> -->

                    <!-- 文章列表 -->
                    <div class="space-y-8">
                        {{if articleList.list.length>0}}
                        {{each articleList.list}}
                        <article class="news-item bg-white rounded-lg shadow-md overflow-hidden">
                            <div class="md:flex">
                                {{if $value.img}}
                                <div class="md:w-1/3">
                                        <img src="{{$value.img || '/public/template/nuofeng/img/img1.jpg'}}"
                                        alt="{{$value.title}}" class="w-full h-48 md:h-full object-cover">
                                    </div>
                                 {{/if}}
                                <div class="p-6 md:w-{{$value.img?'2':'3'}}/3">
                                    <div class="flex items-center text-sm text-gray-500 mb-2">
                                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">{{$value.name}}</span>
                                        <span class="ml-4"><i class="far fa-calendar-alt mr-2"></i>{{ dateFormat($value.createdAt, 'YYYY-MM-DD HH:mm:ss') }}</span>
                                        <span class="ml-4"><i class="far fa-eye mr-2"></i>{{$value.pv}}</span>
                                    </div>
                                    <h2 class="text-xl font-bold mb-3">
                                        <a href="{{$value.path}}/article-{{$value.id}}.html"
                                            class="hover:text-blue-600">{{$value.title}}</a>
                                    </h2>
                                    <p class="text-gray-600 mb-4">
                                        {{$value.description}}
                                    </p>
                                    <a href="{{$value.path}}/article-{{$value.id}}.html" class="text-blue-600 hover:text-blue-800">
                                        阅读更多 <i class="fas fa-arrow-right ml-2"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                        {{/each}}
                         {{/if}}
                      
                    </div>

                    <!-- 分页 -->
                 

                      {{if pageHtml}}
            <div class="mt-12 flex justify-center">
                <nav class="inline-flex rounded-md page">
                    <ul>
                    {{@ pageHtml}}
                    </ul>
                    <!-- <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
                        1
                    </a>
                    <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        2
                    </a>
                    <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        3
                    </a>
                    <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        下一页
                    </a> -->
                </nav>
            </div>
            {{/if}}
                </div>

                <!-- 右侧边栏 -->
                <div class="lg:w-1/4">
                    <!-- 搜索框 -->
                     <!-- 隐藏搜索框 -->
                    <div class="bg-white rounded-lg shadow-md p-6 mb-8 hidden">
                        <h3 class="text-lg font-semibold mb-4">搜索文章</h3>
                        <div class="relative">
                            <input type="text" placeholder="输入关键词搜索..."
                                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <button class="absolute right-3 top-2.5 text-gray-400 hover:text-gray-600">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 热门文章 -->
                    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
                        <h3 class="text-lg font-semibold mb-4">{{cate.name}}</h3>
                        <div class="space-y-4">
                            {{each hot}}
                            <a href="{{$value.path}}/article-{{$value.id}}.html" title="{{$value.title}}" class="flex items-center gap-4 hover:bg-gray-50 p-2 rounded">
                                <div>
                                    <h4 class="font-medium text-gray-900 line-clamp-2">{{$value.title}}</h4>
                                    <p class="text-sm text-gray-500 mt-1"> 阅读 {{$value.pv}}</p>
                                </div>
                            </a>
                           {{/each}}
                        </div>
                    </div>

                    <!-- 文章分类 -->
                    <!-- <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-semibold mb-4">文章分类</h3>
                        <ul class="space-y-2">
                            <li>
                                <a href="#" class="flex items-center justify-between text-gray-600 hover:text-blue-600">
                                    <span>公司新闻</span>
                                    <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm">12</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center justify-between text-gray-600 hover:text-blue-600">
                                    <span>行业资讯</span>
                                    <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm">24</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center justify-between text-gray-600 hover:text-blue-600">
                                    <span>外贸知识</span>
                                    <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm">18</span>
                                </a>
                            </li>
                        </ul>
                    </div> -->
                </div>
            </div>
        </div>
    </section>

     <!-- 页脚 -->
    {{include './common/footer.html'}}
    {{include './common/js.html'}}
    <script>
        // 分类按钮初始化
        document.addEventListener('DOMContentLoaded', function () {
            const categoryButtons = document.querySelectorAll('.category-button');
            const urlParams = new URLSearchParams(window.location.search);
            const currentCategory = urlParams.get('category') || 'all';

            // 设置初始选中状态
            categoryButtons.forEach(button => {
                if (button.dataset.category === currentCategory) {
                    button.classList.add('active');
                }
            });

            // 添加点击事件处理
            categoryButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    // 移除所有按钮的active类
                    categoryButtons.forEach(btn => btn.classList.remove('active'));
                    // 为当前按钮添加active类
                    this.classList.add('active');

                    // 更新URL参数，保留已有参数
                    const newUrl = new URL(window.location);
                    newUrl.searchParams.set('category', this.dataset.category);
                    window.history.pushState({}, '', newUrl);
                    
                    // 触发页面重新加载以应用筛选
                    window.location.href = newUrl.toString();
                });
            });
   });

   </script>

</body>

</html>